//endcourse 已上课程样式
import React from 'react';
import './css/endcourse.less';
import {Link } from 'react-router-dom';
import http from '../../utils/http';

class MyOrderform extends React.Component{
    state={
      iscancel:false,
      classId:'',
      pagers:this.props.pagers,
      neworderList:[]
    }
    componentDidMount(){
    }

    // 取消订单
    cancelOrder=()=>{
      http
      .get('order/cancle/order', {
        params: {
          orderId:this.props.dataText.orderId
        }
      })
      .then(data=>{
        this.props.changePage(0)
      },err=>{
      })
     }
    render(){
        return (
          // 已上课程表单组件最外层盒子
          <div  className="col-lg-12 col-md-12 col-sm-12 col-xs-12 endCourseform" >
            {this.state.iscancel===false?
              <div className="panel panel-default">
                <div className="panel-footer">
                {/* 判断订单类型 */}
                  <span className="orderwh"><b className="orderhao">订单号</b><i className="iorderwh" >{this.props.dataText.orderId}</i></span>
                  <span className="paystatus">{this.props.dataText.status ===1?'等待支付':'已完成'}</span>
                </div>
                <div className="panel-body">
                <div  className="col-md-7  col-sm-12 col-xs-12 classconte">
                  <ul className="fl courseDetails">
                    <li className="nowclassType">
                      <b>课程类型</b><i>{this.props.dataText.productName}</i>
                    </li>
                    <li className="nowClassTime">
                      <b>上课时间</b>
                          <i>{this.props.dataText.dayBuckets.dayVal}
                          {
                            this.props.dataText.timeBuckets.map((item,index)=>{
                              return (<span key={item.key+index}>
                                &nbsp;{index === 0 ? <span>(</span>:''}{item.timeVal}{index === (this.props.dataText.timeBuckets.length-1)?<span>)</span>:''}
                              </span>)
                            })
                          }
                          </i>
                    </li>
                    {this.props.dataText.giveClassNumber?
                    <li className="nowClassCont">
                      <b>包含课时</b><i>{this.props.dataText.classNumber}赠{this.props.dataText.giveClassNumber}={Number(this.props.dataText.giveClassNumber)+Number(this.props.dataText.classNumber)}节课</i>
                    </li>
                    :
                    <li className="nowClassCont">
                      <b>包含课时</b><i>{this.props.dataText.classDesc}节课</i>
                    </li>
                    }
                  </ul>
                </div>
                 <div  className="col-md-2 col-sm-12 col-xs-12 moneywh">
                    <p className="orderprice"> ￥{this.props.dataText.actualPayment}</p>
                 </div>
                  
                  {this.props.dataText.status ===1?
                    <div className="  payornot col-md-2 col-sm-12 col-xs-12"> 
                      <Link to={`/payOrder/?orderid=${this.props.dataText.orderId}`}>
                      <button className="nowpay" >立即支付</button>
                      </Link>
                      <br/>
                      <button className="cancelorder" onClick={this.cancelOrder}> 取消订单</button>
                    </div>
                    :<div className=" paywh col-md-2 col-sm-12 col-xs-12">
                        <p  className="wuhao"style={{fontSize:12,marginLeft:3}}>
                          <Link to='/admin/agreement/' target="_blank">
                            《皮皮鱼少儿英语课程服务协议》
                          </Link>
                        </p>
                    </div>
                  }
                 </div>
                </div>
             :""
            }
          </div>
        )
    }
}

export default MyOrderform